<template>
  <div class="container-left">
    <!-- avatarInfo -->
    <avatar-info></avatar-info>
    <!-- foreverLove -->
    <forever-love v-if="showLove"></forever-love>
    <!-- some-words -->
    <soft-words v-else></soft-words>
  </div>
</template>

<script>
import avatarInfo from './avatarInfo.vue';
import ForeverLove from './foreverLove.vue';
import SoftWords from './softWords.vue';
export default {
  components: { avatarInfo, ForeverLove,SoftWords},
  data() {
    return {
      showLove:false,
    };
  },
  methods:{
  },
  created(){
    // 监听change事件
    this.bus.$on('changeCard',(data)=>{
      this.showLove = !this.showLove;
    })
  },
};
</script>

<style lang='scss' scoped>
.container-left{
  max-width: 300px;
  // min-width: 200px;
}
</style>
